<%--
  Created by IntelliJ IDEA.
  User: 甲乙饼叮叮
  Date: 2019/10/3
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="Shortcut Icon" href="../imgs/Kat-icon.png">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link type="text/css" href="../css/personal.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/alert.css">
</head>

<body>
<!-- 导航开始 -->
<%@ include file="../nav/nav.jsp"%>
<!-- 导航结束 -->
    <!-- 个人中心视图 -->
    <a name="per"></a>
    <div class="personal">
        <div class="container">
            <div class="row">
                <div class="col-xs-2 col-sm-2 col-md-2" id="left">
                    <div class="title">
                        <span>个人中心</span>
                    </div>
                    <div id="outer">

                        <!-- <div class="container-fluid"> -->
                        <ul id="tab" class="nav navbar-nav">
                            <li><a href="${pageContext.request.contextPath}/personal/user" class="glyphicon glyphicon-user">&nbsp;<span>我的信息</span></a>
                            </li>
                            <li><a href="${pageContext.request.contextPath}/personal/order"
                                   class="glyphicon glyphicon-list-alt">&nbsp;<span>挂号订单</span></a></li>
                            <li><a href="${pageContext.request.contextPath}/personal/record"
                                   class="glyphicon glyphicon-calendar">&nbsp;<span>就诊记录</span></a></li>
                            <li><a href="${pageContext.request.contextPath}/personal/medical"
                                   class="glyphicon glyphicon-tasks">&nbsp;<span>我的病历</span></a>
                            </li>
                            <li class="active"><span class="glyphicon glyphicon-phone">&nbsp;账号安全</span>
                            </li>
                            <li><a href="${pageContext.request.contextPath}/personal/newview" class="glyphicon glyphicon-tree-deciduous">&nbsp;<span>就诊管理</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-9 col-sm-9 col-md-9" id="righter">
                    <div class="title">
                        <span><img src="${pageContext.request.contextPath}/imgs/weblogo.png" alt="" style="width: 2%">知医治</span>
                    </div>
                    <div id="content">
                        <div style="display:block;" class="tabpage">
                            <h3 class="glyphicon glyphicon-grain">账号安全</h3>
                            <form action='<%=request.getContextPath()%>/personal/safetyphone' method='post' class='form-horizontal' role='form'>
                            <div class="counts">
                                <div class="texts">
                                    <span>新的号码:</span>&nbsp;&nbsp;&nbsp;
                                    <input type="text" value="${user.phone}" name="phone" id="phone">
                                    <input type="button" id="codes" value="获取验证码"  style="padding: 3px;background-color: rgb(3,141,70);color: white;border: 0px;"/>
                                    <%--<button type="button" style="color: white">发送验证码</button>--%>
                                </div>
                                <div class="texts">
                                    <span>验&nbsp;&nbsp;证&nbsp;&nbsp;码:</span>&nbsp;&nbsp;&nbsp;
                                    <input type="text" placeholder="请输入收到的验证码" id="codeLine">
                                </div>
                                <div>
                                    <button type="button" onclick="location.href='${pageContext.request.contextPath}/personal/safetys'" style="color: white">取消修改</button>&nbsp;&nbsp;&nbsp;
                                    <button class="alert-api-button alert-btn1" type="button" style="color: white" id="register">确认修改</button>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<%@ include file="../nav/foot.jsp"%>
    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../plugins/bootstrap/js/bootstrap.js"></script>
    <!-- 引入alert的js文件 -->
    <script src='../js/alert.js'></script>
<script type="text/javascript">
    var wait=60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value="重新获取验证码";
            wait = 60;
        } else {

            o.setAttribute("disabled", true);
            o.value="重新发送(" + wait + ")";
            wait--;
            setTimeout(function() {
                    time(o)
                },
                1000)
        }
    }
    document.getElementById("codes").onclick=function(){time(this);}
</script>
<script>
    <%--phone codeline codes password cks cksLogin register--%>
    $(function () {

        $("#codes").click(function () {
            var phone = document.getElementById("phone").value;
            if(phone!=null) {
                $.ajax({
                    url: "/treatment/personal/sendMsg",
                    data: {phone: phone},
                    type: "POST",
                    success: function (results) {
                        console.log(results)
                        if(results.msg == "该用户已存在"){
                            alert("用户已存在");
                            return
                        }
                    }
                })
            }else {
                alert("请输入手机号")
            }
        })

        $("#register").click(function () {
                var phone = document.getElementById("phone").value;
                var codeLine = document.getElementById("codeLine").value;

                var mobilereg1 = /^1[3|5|6|7|8|9][0-9]{9}$/;
                var mobilereg2 = /^14[5|7][0-9]{8}$/;
                var r=/^[1-9][0-9]+$/gi;
                if(!phone){
                    alert("请输入手机号码")
                    return;
                }else if(!mobilereg1.test(phone)&&!mobilereg2.test(phone)){
                    alert("手机号输入不合法请重新输入")
                    return;
                }else if(!r.test(codeLine)&&codeLine.length!=6){
                    alert("验证码输入格式不正确")
                    return;
                }else{

                    $.ajax({
                        url:"/treatment/personal/changeone",
                        data:{phone:phone,codeLine:codeLine},
                        type:"POST",
                        success:function (result) {

                            console.log(result)

                            if(result.message != codeLine){
                                alert("验证码输入不正确，请确认");
                                return;
                            }else{
                                alert("修改成功")
//                                window.location.reload();
                                window.location.href='${pageContext.request.contextPath}/cloginview';
                            }
                        }
                    })
                }
                console.log(phone);
                console.log(codeLine);
        })
    })
</script>
</body>
</html>
